<template>
	<view class="page-cont">
		<navbar title="数据查询"></navbar>
		<view class="query-cont" :style="{height: pageHeight}">
			<scroll-view class="query-info" scroll-y>
				<text class="query-info-title">分组类型：</text>
				<view class="query-info-info">
					<text v-for="(item,index) in typeData" :key="index"
						:class="[index==typeIndex?'query-info-info-item-select':'query-info-info-item']"
						@tap="onTypeTap(index)">
						{{item.name}}
					</text>
				</view>
				<text class="query-info-title">分组名称：</text>
				<view class="query-info-info">
					<text v-for="(item,index) in groupData" :key="index"
						:class="[index==groupIndex?'query-info-info-item-select':'query-info-info-item']"
						@tap="onGroupTap(index)">
						{{item.name}}
					</text>
				</view>

				<text class="query-info-title">设备名称：</text>
				<view class="query-info-info">
					<text v-for="(item,index) in nameData" :key="index"
						:class="[index==nameIndex?'query-info-info-item-select':'query-info-info-item']"
						@tap="onNameTap(index)">
						{{item.name}}
					</text>
				</view>
				<text class="query-info-title">选择时间：</text>
				<view class="query-info-info">
					<text v-for="(item,index) in rangeData" :key="index"
						:class="[index==rangeIndex?'query-info-info-item-select':'query-info-info-item']"
						@tap="onRangeTap(index)">
						{{item.name}}
					</text>
				</view>
				<text class="query-info-title" v-if="rangeIndex ==4">时间范围：</text>
				<view :style="{marginTop:'30rpx'}">
					<uni-datetime-picker v-if="rangeIndex ==4" v-model="currentTime" type="datetimerange"
						:clear-icon="false" :leftIcon="false" @change="handleDateChange" rangeSeparator="至" />
				</view>
			</scroll-view>

			<button class="query-btn" @tap="queryInfo()">查询</button>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js";
	import { storeToRefs } from 'pinia';
	import useUserStore from '@/store/user.js';
	import useHomeStore from '@/store/home';
	const homeStore = useHomeStore();
	const { pageHeight, sysStatusBarHeight } = useNavbar();
	const { projectId } = storeToRefs(homeStore);
	const { proxy } = getCurrentInstance();

	const typeIndex = ref(0);
	const typeData = ref([{ name: "冷间", id: "20" }, { name: "机组", id: "40" }, { name: "冷凝器", id: "30" }]);

	const groupIndex = ref(0);
	const groupData = ref([]);

	const nameIndex = ref(0);
	const nameData = ref([]);

	const rangeIndex = ref(0);
	const rangeData = ref([{ name: "近1小时" }, { name: "近6小时" }, { name: "近1天" }, { name: "近3天" }, { name: "自定义" }]);

	const currentTime = ref([])

	onMounted(() => {
		onTypeTap(0);
		onRangeTap(0);
	})

	// 分组类型
	const onTypeTap = (index) => {
		typeIndex.value = index;
		groupIndex.value = 0;
		groupData.value = [];
		nameIndex.value = 0;
		nameData.value = [];
		switch (index) {
			case 0:
				if (homeStore.projectModus[20] && homeStore.projectModus[20].length) {
					groupData.value.push(...homeStore.projectModus[20]);
				}
				break;
			case 1:
				if (homeStore.projectModus[40] && homeStore.projectModus[40].length) {
					groupData.value.push(...homeStore.projectModus[40]);
				}
				break;
			case 2:
				if (homeStore.projectModus[30] && homeStore.projectModus[30].length) {
					groupData.value.push(...homeStore.projectModus[30]);
				}
				break;
		}
		onGroupTap(0);
	}

	// 分组名称
	const onGroupTap = (index) => {
		groupIndex.value = index
		nameIndex.value = 0;
		nameData.value = [];

		Object.keys(homeStore.projectModus).forEach(key => {
			homeStore.projectModus[key].forEach(item => {
				if (groupData.value[groupIndex.value].id == item.pid) {
					item.key = key;
					item.keys = `${key}_0_${item.id}_0`
					nameData.value.push(item)
				}
			})
		});

	}

	// 设备名称
	const onNameTap = (index) => {
		nameIndex.value = index
	}

	const onRangeTap = (index) => {
		rangeIndex.value = index
		switch (index) {
			case 0:
				currentTime.value = [proxy.dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'), proxy.dayjs().format('YYYY-MM-DD HH:mm:ss')]
				break;
			case 1:
				currentTime.value = [proxy.dayjs().subtract(6, 'hour').format('YYYY-MM-DD HH:mm:ss'), proxy.dayjs().format('YYYY-MM-DD HH:mm:ss')]
				break;
			case 2:
				currentTime.value = [proxy.dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), proxy.dayjs().format('YYYY-MM-DD HH:mm:ss')]
				break;
			case 3:
				currentTime.value = [proxy.dayjs().subtract(3, 'day').format('YYYY-MM-DD HH:mm:ss'), proxy.dayjs().format('YYYY-MM-DD HH:mm:ss')]
				break;
		}

	}


	const handleDateChange = (e) => {
		currentTime.value = e;
	}

	const queryInfo = () => {
		uni.navigateTo({
			url: `/pages/data/query-result?key=${nameData.value[nameIndex.value].keys}&startTime=${currentTime.value[0]}&endTime=${currentTime.value[1]}&name=${nameData.value[nameIndex.value].name}&groupid=${groupData.value[groupIndex.value].id}&typeId=${nameData.value[nameIndex.value].key}&id=${nameData.value[nameIndex.value].id}`
		});
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		.query-cont {
			display: flex;
			flex-direction: column;
			padding: 20rpx;

			.query-info {
				overflow: hidden;
				overflow-y: auto;
				flex: 1;
				height: 80vh;
				background-color: #FAFAFC;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				border-radius: 5rpx;
				border: 2px solid #FFFFFF;
				box-shadow: 0px 10px 10px 0px rgba(135, 166, 233, 0.1);

				.query-info-title {
					color: #333333;
					font-weight: 600;
					font-size: 25rpx;
				}

				.query-info-info {
					width: 100%;
					display: grid;
					padding-top: 30rpx;
					padding-bottom: 30rpx;
					grid-template-columns: repeat(3, 1fr);
					gap: 20rpx;

					.query-info-info-item,
					.query-info-info-item-select {
						background-color: #FFFFFF;
						border: 1px solid #CCCCCC;
						border-radius: 5rpx;
						color: #5A6570;
						padding-top: 15rpx;
						padding-bottom: 15rpx;
						text-align: center;
						font-size: 22rpx;
					}

					.query-info-info-item-select {
						background-color: rgba(95, 131, 249, 0.1);
						border: 1px solid #5F83F9;
						border-radius: 5rpx;
						color: #5F83F9;
					}
				}
			}

			.query-btn {
				width: 100%;
				padding-top: 15rpx;
				padding-bottom: 15rpx;
				margin-bottom: 40rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				border-radius: 10rpx;
				background: linear-gradient(135deg, rgba(126, 156, 255, 1) 0%, rgba(29, 74, 218, 1) 100%),
					linear-gradient(180deg, rgba(238, 240, 249, 1) 0%, rgba(255, 255, 255, 1) 100%);
				box-shadow: 0px 10px 20px 0px rgba(95, 131, 249, 0.1);

				&:active {
					transform: scale(0.98);
					opacity: 0.9;
				}

			}
		}

		.main-cont {
			padding-bottom: 10px;
			box-sizing: border-box;
		}
	}
</style>